<template>
  <div class="left-tool">
    <div class="left-bar">
      <div
        v-for="item in tools"
        :key="item.key"
        @click="clickItem(item.key)"
        :class="['tool-item d-flex-c ai-c jc-c c-pointer', currentKey === item.key ? 'active' : '']"
      >
        <BKSvgIcon
          :icon-class="'svg-making-' + item.key"
          class="f-24"
        />
        <span class="tool-item-text">{{ item.text }}</span>
      </div>
    </div>
    <ToolPanel
      :current-key="currentKey"
      v-show="currentKey"
      v-on="$listeners"
      @close="currentKey = ''"
    />
    <!-- <BKModal
      v-model="visible"
      width="900px"
      height="600px"
      title="已出专题图录"
      @close="currentKey = ''"
    >
      <ConfigGrid
        :configs="configs"
        ref="grid"
        :has-add="false"
      />
    </BKModal>
    <BKImagePreviewer ref="imagePreviewer" /> -->
  </div>
</template>

<script>
import ToolPanel from './tool-panel.vue'
export default {
  name: 'LeftTool',
  components: {
    ToolPanel
  },
  data () {
    return {
      tools: [
        { text: '基础\n图层', key: 'layer' },
        { text: '区域\n边界', key: 'boundary' },
        { text: '图层\n要素', key: 'item' },
        { text: '预览\n设置\n导出', key: 'export' },
        { text: '已出\n专题\n图录', key: 'finish' },
        { text: '水利\n工程\n基础\n信息\n维护', key: 'info' }
      ],
      currentKey: '',
      visible: false,
      configs: {
        appId: 'YSJC',
        bzCode: 'YSJC',
        metaSet: 'YSQJC_ZTT_XXBC',
        afterFetchColumns: this.afterFetchColumns,
        noOperation: true,
        module: '记录'
      }
    }
  },
  methods: {
    clickItem (key) {
      if (this.currentKey === key) {
        this.currentKey = ''
        return
      }
      this.currentKey = key
    }
  }
}
</script>

<style lang="scss" scoped>
.left-tool {
  position: relative;

  .left-bar {
    width: 58px;
    height: 100%;
    background: #fff;
    border-right: 1px solid #bcc7d8;

    .tool-item {
      padding: 12px 0;
      position: relative;
      user-select: none;
      z-index: 9;

      &:first-child {
        border-radius: 0;
      }

      .tool-item-text {
        color: #5f5f5f;
        white-space: pre;
        font-size: 12px;
      }

      .svg-icon {
        color: #333;
        margin-bottom: 6px;
      }

      &.active,
      &:hover {
        background: #1496ff;

        .tool-item-text {
          color: #fff;
        }

        .svg-icon {
          color: #fff;
        }
      }

      &.active {
        &::after {
          content: "";
          display: inline-block;
          width: 0;
          height: 0;
          position: absolute;
          right: -1px;
          top: 50%;
          border: 10px solid transparent;
          border-right-color: #fff;
          transform: translateY(-50%);
        }
      }
    }
  }
}
</style>
